<template>
	<view class="wrap">
		<u-form :model="form" ref="uForm" label-width="150" :error-type="errorType">
			<u-form-item label="昵称" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="邮箱" prop="email">
				<u-input v-model="form.email" />
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" type="password" />
			</u-form-item>
			<u-form-item label="确认密码" prop="password_confirmation">
				<u-input v-model="form.password_confirmation" type="password" />
			</u-form-item>
		</u-form>
		<u-button @click="submit">注册</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'],
				form: {
					name: 'Olag名字',
					email: 'asb123123456@11.com',
					password: '123123456',
					password_confirmation: '123123456'
				},
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					}],
					email: [{
						validator: (rule, value, cb) => {
							return this.$u.test.email(value);
						},
						message: '邮箱格式错误',
						trigger: 'blur'
					}],
					password: [{
						validator: (r, v, cb) => {
							return this.$u.test.rangeLength(v, [6, 16])
						},
						message: '密码请输入6-16个字符',
						trigger: 'blur'
					}],
					password_confirmation: [{
						validator: (r, v, cb) => {
							return this.form.password === v;
						},
						message: '两次密码不一样',
						trigger: 'blur'
					}],
				}
			}
		},
		computed: {

		},
		methods: {
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const res = await this.$u.api.register(this.form);
						if(res !== '') return;
						this.$u.toast('注册成功');
						setTimeout(() => {
							// console.log('路由跳转')
							this.$u.route({
								url: 'pages/auth/login',
								type: 'redirect', //关闭当前页面，跳转到登录页面
								params: {
									email: this.form.email,
									password: this.form.password
								}
							})
						}, 1000)
					}
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		width: 80%;
		margin: 40rpx auto;
	}
</style>
